<template>
  <div class="compoentBox">
    <Title :title="'主要流量分析'"/>
    
      <div class="ec-wrap">
        <!-- ECHART示例 -->
        <el-select v-model="curRoad" placeholder="请选择" @change="initData" class="selectBox">
          <el-option
            v-for="item in roadList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
            style="font-size: 12px;">
          </el-option>
        </el-select>
        <EcResize :option="ecOption" />
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted, watch } from 'vue';
import EcResize from '@sutpc/vue3-ec-resize';
import Title from '../title.vue'
import { useUserStore } from '@/store/user';
import { getJunctionFlow } from '../../../../utils/apiComponent'
import { searchRoadApi } from '@/utils/api'
export default defineComponent({
  name: 'ComponentOne',
  components: {
    Title,
    EcResize
  },
  setup() {
    const data = reactive({
      curRoad: '123',
      roadList: [],
      messagLineChart: {
        value: [21,	23,	27,	28,	24,	25,	19,	28,	17,	25,	19,	27,	25,	26,	27,	28,	26,	26,	17,	25,	24,	26,	28,	27,	25,	27,	28,	28,	29,	23,],
        xAixs: ['1', '', '', '', '5', '', '', '', '', '10', '', '', '', '', '15', '', '', '', '', '20', '', '', '', '', '25', '', '', '', '', '30']
      },
    })
    const ecOption = computed(() => {
      return {
        title: {
          text: '单位(个)',
          show: true,
          left: '0',
          top: '0',
          textStyle: {
            color: 'rgba(255, 255, 255, .8)',
            fontSize: 12
          }
        },
        color: [{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(9, 88, 155, 1)'
          }, {
            offset: 1, color: 'rgba(19, 198, 230, 0.77)'
          }]
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        // formatter: function (params) {
        // var res =
        //   "<div style='margin-bottom:5px;width:100%;padding: 0 12px;height:24px;line-height:24px;border-radius:3px; text-align: left'><p>" +
        //   params[0].name +
        //   " </p></div>";
        // for (var i = 0; i < params.length; i++) {
        //   res += `<div style="color: #000;font-size: 14px; padding:0 12px;line-height: 24px">
        //       <span style="display:inline-block;margin-right:5px;border-radius:2px;width:10px;height:10px;background-color:${[
        //         params[i].color,
        //       ]};"></span>
        //       平均速度
        //       ${params[i].data}m/s
        //     </div>`;
        // }
        // return res;
        // },
        },
        legend: {
          show: false,
          orient: 'horizontal',
          selectedMode: false,
          right: 40
        },
        grid: {
          left: '8px',
          right: '3%',
          bottom: '0%',
          top: '30px',
          containLabel: true
        },
        axisLine: {
          lineStyle: {
            opacity: 1
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          data: data.messagLineChart.xAixs,
          axisLabel: {
            color: 'rgba(255, 255, 255, 0.80)',
            // interval: 3,
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0)',
              width: 0.1
            }
          }
        }],
        yAxis: [{
          type: 'value',
          show: true,
          // splitNumber: 3,
          axisLabel: {
            formatter: '{value}',
            color: 'rgba(255, 255, 255, 0.80)',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(230, 247, 255, 0.30)',
              width: 0.3
            }
          }
        }
        ],
        series: [{
          name: name,
          type: 'bar',
          barWidth: 8,
          smooth: true,
          // lineStyle: {
          //   width: 0
          // },
          showSymbol: false,
          itemStyle: {
            barBorderRadius: [20, 20, 0, 0]
          },
          // areaStyle: {
          //   opacity: 1,
          //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //     offset: 0,
          //     color: 'rgba(88, 116, 180, 0.4)'
          //   }, {
          //     offset: 0.5,
          //     color: 'rgba(88, 116, 180, .2)'
          //   }, {
          //     offset: 0.9,
          //     color: 'rgba(88, 116, 180, 0)'
          //   }])
          // },
          // emphasis: {
          //   focus: 'series'
          // },
          data: data.messagLineChart.value
        }
        ]
      }
    });
    const initData = () => {
      getJunctionFlow(data.curRoad).then((res) => {
        console.log(res)
        data.messagLineChart.value = []
        data.messagLineChart.xAixs = []
        res.forEach(item => {
          data.messagLineChart.xAixs.push(item.date)
          data.messagLineChart.value.push(item.flow)
        })
      })
    }
    // const userStore = useUserStore()
    // // 获取搜索路口值
    // const searchValue = computed(() => {
    //   initData()
    //   return userStore.getSearchValueId
    // })
    // watch(searchValue, () => {})
    const initRoadList = () => {
      searchRoadApi('').then(res => {
        console.log(res)
        data.roadList = res
        initData()
      })
    }
    onMounted(() => {
      initRoadList()
    })
    const refData = toRefs(data)
    const handleEntrance = () => {
      console.log('handleEntrance')
    }
    return {
      ...refData,
      ecOption,
      handleEntrance,
      initData
    }
  }
})
</script>

<style lang="less" scoped>
.compoentBox{
  position: relative;
}
.box{
  width: 100%;
  height: 84px;;
  background-image: url('@{publicPath}static/images/componenttwo/img_moren.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ec-wrap {
  width: 100%;
  height: 280px;
  margin-bottom: 30px;
  // position: relative;
}
.selectBox{
  position: absolute;
  top: 20px;
  right: 0;
  width: 166px;
  font-size: 18px;
  z-index: 1;
}
</style>